<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>

<body>
    <div style="margin: 0 auto; width: 500px;">
        <button id="reset">重新开始一局游戏</button> <br />
        请输入要猜的数字：<input type="number" id="inputNum"> <button id="guess">猜</button> <br />
        已经猜的字数：<span id="count">0</span> <br />
        结果：<span id="result"></span>
    </div>

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        let randomNum = Math.floor(Math.random() * 100) + 1; // 1-100之间的随机数
        console.log(randomNum);
        let count = 0; // 猜的次数

        $("#guess").click(function () {
            count++;
            $("#count").text(count);
            let inputNum = $("#inputNum").val() // 获取用户输入的值
            if (inputNum < randomNum) {
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            } else if (inputNum > randomNum) {
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            } else {
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }
        });

        $("#reset").click(function () {
            randomNum = Math.floor(Math.random() * 100) + 1; // 重新生成数字
            console.log(randomNum);
            count = 0;
            // 清空文本框、次数、结果
            $("#inputNum").val("");
            $("#count").text(count);
            $("#result").text("");
        });
    </script>
</body>

</html>